package cn.liu.jetpack_demo.components

import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Easing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CardElevation
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.liu.jetpack_demo.ui.theme.LcShapes

@ExperimentalMaterial3Api
@Composable
fun ExpandableCard(
    title: String,
    content: String
) {
    // TODO
    var expandedState by remember { mutableStateOf(false) }
    val rotationState by animateFloatAsState(targetValue = if (expandedState) 180f else 0f)

    Card(
        modifier = Modifier
            .padding(30.dp)
            .animateContentSize(
                animationSpec = tween(
                    durationMillis = 300,
                    easing = LinearOutSlowInEasing
                )

            ),
        colors =  CardDefaults.cardColors(containerColor = Color.White, contentColor = Color.White),
        shape = LcShapes.medium,
//        elevation = CardDefaults.elevatedCardElevation(defaultElevation = 10.dp),
        onClick = {
      }
    ) {
        Column (
            modifier = Modifier
                .fillMaxWidth()
        ){
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween) {
                Text(
                    text = title,
                    style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold, color = Color.Black),
                    modifier = Modifier.padding(16.dp),
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                IconButton(modifier = Modifier
                    .padding(16.dp)
                    .rotate(rotationState), onClick = { expandedState = !expandedState }) {
                        Icon(modifier = Modifier.size(30.dp),imageVector = Icons.Default.ArrowDropDown, contentDescription = "drop-down arrow", tint = Color.Black)
                    }
            }
            if(expandedState) {
                Text(
                    text = content,
                    style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Normal, color = Color.Black),
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                )
            }
        }
    }
}



@ExperimentalMaterial3Api
@Composable
@Preview
fun ExpandableCardPreview() {
    ExpandableCard(
        title = "My Title",
        content = "Content"
    )
}